<template>
	<view>
		<view style="width: 750rpx;height: 20rpx;background-color:#F9F9F9 ;"></view>
		<scroll-view scroll-y="true" class="scrollyy">


			<view class="sorts">
				<text style="font-size: 14px;font-weight: 600;line-height: 50px;">排序方式</text>
				<view class="sortsitem" v-for="(item,index) in sortss" 
				:key="index" 
				@click="sortsClick(index)">{{item}}
					<view class="duihao" v-if="index===isShow">√</view>
				</view>

			</view>
			<view class="sorts"><text style="font-size: 14px;font-weight: 600;line-height: 50px;">排序属性</text>
				<view class="sortsitem" v-for="(item,index) in sortdatas" :key="index" @click="sortsClicktwo(index)">
					{{item}}
					<view class="duihao" v-if="index===isShowtwo">√</view>
				</view>
			</view>

		</scroll-view>
		
		<!--  -->
		  <view class="indexbo">
		  	<view class="indbu" 
		  	v-for="(item, index) in buttons" 
		  	:key="index" 
		  	:class="current === index ? 'active1' : ''" 
		  	@click="changecolor(index)">{{ item }}</view>
		  </view>
		<!--  -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//排序属性
				sortdatas: ['成交几率','报价总金额','产品制作天数'
				],
				//排序方式
				sortss: ['正序排列', '倒序排列'],
				isShow: 0,
				isShowtwo: 0,
				buttons: ['重置', '确认'],
				current:'',
				sortrule:[0,0], //排序规则
				
				
			}
		},
		updated(){
			/* console.log(this.sortrule); */
		},
		
		methods: {
			sortsClick(index) {
				this.isShow = index;
				this.sortrule[0]=index;
			},
			sortsClicktwo(index) {
				this.isShowtwo = index;
				this.sortrule[1]=index;
			},
			changecolor(index) {
				this.current = index;
				this.iscurrent=3;
				
				if(index===1){
					console.log(this.sortrule);
					this.$emit('closetemp',this.sortrule)
				}
				if(index===0){
					console.log(this.sortrule);
					this.$emit('closetemp','')
				}
			}
		}
	}
</script>

<style lang="scss">
	.scrollyy {
		width: 750rpx;
		height: 1100rpx;
		font-size: 12px;
		color: #666666;

		.sorts {
			padding: 40rpx 20rpx;

			.sortsitem {
				display: flex;
				border: 1px solid #F2F2F2;
				width: 700rpx;
				height: 100rpx;
				text-align: left;
				flex-direction: row;
				line-height: 100rpx;
				justify-content: space-between;
				padding: 0 40rpx;

				.duihao {
					color: #2B85E4;
				}
			}
		}
	}
.indexbo{
	display: flex;
	.indbu {
		width: 50%;
		height: 100rpx;
		box-sizing: border-box;
		border: 1rpx solid #eee;
		text-align: center;
		line-height: 100rpx;
		color: #1678ff;
	}
	.active1{
		color: #FFFFFF;
		background-color: #1678ff;
	}
	
}
</style>
